import React, { Component } from 'react'
import "./order.less"
import NavBar from '../../components/navBar/navBar.js'

import { Button } from "antd-mobile";
import { List} from "antd-mobile";
import {Badge} from "antd-mobile";
const Fragment = React.Fragment
const Item = List.Item;
const Brief = Item.Brief;
class Order extends Component {
    constructor() {
        super()
    }
    render() {
        return (
            <Fragment>
                <div className='wrap'>

               
                <NavBar titleText={"提交订单"}></NavBar>
                <div className="bg">

                </div>

                <div className='orderCard'>
                    <div className='shopInfo'>
                        <div className='shopImage'></div>
                        <div className='shopName'>店铺名字</div>
                    </div>

                    <div className='orderItem'>
                        <div className='goodImage'>

                        </div>
                        <div className='orderContain'>
                            <div className='goodName'>商品的名字</div>
                            <div className='goodNum'>
                                x1份
                            </div>
                        </div>
                        <div className='goodsPrice'>
                            ￥18.5
                        </div>
                    </div>
                    <div className='orderItem'>
                        <div className='goodImage'>

                        </div>
                        <div className='orderContain'>
                            <div className='goodName'>商品的名字</div>
                            <div className='goodNum'>
                                x1份
                            </div>
                        </div>
                        <div className='goodsPrice'>
                            ￥18.5
                        </div>
                    </div>
                    <div className='orderItem'>
                        <div className='goodImage'>

                        </div>
                        <div className='orderContain'>
                            <div className='goodName'>商品的名字</div>
                            <div className='goodNum'>
                                x1份
                            </div>
                        </div>
                        <div className='goodsPrice'>
                            ￥18.5
                        </div>
                    </div>
                    <div className='orderItem'>
                        <div className='goodImage'>

                        </div>
                        <div className='orderContain'>
                            <div className='goodName'>商品的名字</div>
                            <div className='goodNum'>
                                x1份
                            </div>
                        </div>
                        <div className='goodsPrice'>
                            ￥18.5
                        </div>
                    </div>
                    <div className='discountWrap'>
                       
                        <List renderHeader={() => '支付信息'} className="my-list payList">
                            <Item extra="-￥10">
                            <Badge text="首"
                                size={'small'}
                                style={{
                                    padding: '0 3px',
                                    backgroundColor: '#ede1d9',
                                    borderRadius: 2,
                                    color: '#a5673f',
                                    border: '1px solid #ede1d9',
                                    marginRight: '5px',
                                }} />
                                <span style={{fontSize:"12px",color:"#333"}}>新用户下单立减10元</span>
                            </Item>

                            <Item extra="-￥5">
                            <Badge text="减"
                                size={'small'}
                                style={{
                                    padding: '0 3px',
                                    backgroundColor: '#cce6ff',
                                    borderRadius: 2,
                                    color: '#0081ff',
                                    border: '1px solid #cce6ff',
                                    marginRight: '5px'
                                }} />
                                <span style={{fontSize:"12px",color:"#333"}}>在线支付立减10元</span>
                            </Item>
                            <Item extra="+5">
                            <Badge text="积"
                                size={'small'}
                                style={{
                                    padding: '0 3px',
                                    backgroundColor: '#d7f0db',
                                    borderRadius: 2,
                                    color: '#39b54a',
                                    border: '1px solid #d7f0db',
                                    marginRight: '5px'
                                }} />
                                <span style={{fontSize:"12px",color:"#333"}}>积分5</span>
                            </Item>
                        </List>
                    </div>
                    <div className='payInfo'>
                        合计 <span className='large'>￥18.5</span>
                    </div>
                </div>

                <div className='orderInfoBox'>
                <List renderHeader={() => '订单信息'} className="my-list payList">
                            <Item>
                                <span style={{fontSize:"12px",color:"#333"}}>订单状态</span>
                                <span className='rightInfo'>下单中</span>
                            </Item>
                            <Item>
                                <span style={{fontSize:"12px",color:"#333"}}>订单号</span>
                                <span className='copyBtn'>复制</span>
                                <span className='rightInfo'>87987878787777778</span>
                            </Item>
                            
                            <Item>
                                <span style={{fontSize:"12px",color:"#333"}}>下单时间</span>
                                <span className='rightInfo'>2019-10-19  10:10:10</span>
                            </Item>

                            <Item>
                                <span style={{fontSize:"12px",color:"#333"}}>支付时间</span>
                                <span className='rightInfo'>2019-10-19  10:10:10</span>
                            </Item>
                            
                     </List>
                </div>
                <div className='payFoot'>
                    <div className='payInfo'>
                        ￥18.5 <span className='little'>
                            (已优惠4元)
                         </span>
                    </div>
                    <div className='btn'>
                        <Button type='primary'>去支付</Button>
                    </div>
                </div>
                </div>
            </Fragment>
        )
    }
}
export default Order;